<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">

    </div>
</body>
<script>
    const v = new Vue({
        data() {
            return {
                name: "Google",
                url: "http://www.baidu.com"
            }
        },
        computed: {
            // site是一个计算属性
            site: {
                // getter
                // 当访问 site 的时候，会返回 name和url拼接后的字符串
                get: function() {
                    return this.name + " " + this.url
                },

                // setter
                // 当给site赋值的时候，会调用setter，并传入新的值进行操作
                set: function(newValue) {
                    var names = newValue.split(" ")
                    this.name = names[0]
                    this.url = names[names.length - 1]
                }
            }
        }

    }).$mount("#root")

    // 调用 setter、vm.name和vm.url 也会被对应更新
    // 运行下面第一行的时候，setter会被调用, v.name 根 v.url会被对应更新
    v.site = "菜鸟教程 http://www.runoob.com"
    document.write("name: " + v.name)
    document.write("<br>")
    document.write("url: " + v.url)
</script>
</html>